<template>
   <div class="HouseItem">
      <div class="Item-Wrap">
        <img class="Item-img" :src="'http://liufusong.top:8080'+item.houseImg" alt="">
      </div>
      <div class="Item-Right">
        <h3 class="name">{{item.title}}</h3>
        <p class="about">{{item.desc}}</p>
        <p class="dt">{{item.tags.join(',')}}</p>
        <p class="many">{{item.price}}</p>
      </div>
    </div>
</template>

<script>

export default {
  async created () {

  },
  props: ['item']
}
</script>

<style lang='less' scoped>
.HouseItem{
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
  width: 375px;
  height: 120px;
  display: flex;
  margin:15px 15px 0 15px;
  .Item-Wrap{
    width: 160px;
    height: 80px;
  .Item-img{
    width: 100%;
    height: 100%;
  }
  }
  .Item-Right{
    width: 100%;
    height: 100%;

    line-height: 20px;
  .name{
    font-size: 15px;
    margin: 0;
    color: #394043;
  }
  .about{
    font-size: 12px;
    margin: 0;
     color: #afb2b3;
  }
  .dt{
    font-size: 12px;
    margin: 0;
    color: #39becd;
    background: #e1f5f8;
    display: inline-block;
    padding: 2px;
  }
  .many{
    font-size: 17px;
    margin: 0;
    color: #fa5741;
  }
  }
}
</style>
